<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/js.vue.js"></script>
</head>
<body>
    <div id="box">
       性别：
       <label for="fale">男</label>
       <input type="radio" id="nan" v-model="sex" value="nan">
       <label for="nvfale">女</label>
       <input type="radio" id="nv" value="nv" v-model="sex">
       <input type="text" v-model="undex.name">
       
       <div>
        <span class="aac" >杨超{{x}}</span>
        <input type="text" v-model="x">
    </div>
    <script>
           document
           Vue.createApp({
            data(){
                return{
                    sex:"",
                    x:'',
                    undex:{name:"杨超", age:108},
                    aut:0
                }
            },
            watch:{
                //   undex:{
                //          handler(nv,ov){
                //           console.log(nv,ov)
                //          },
                //         //  deep:true,//深度监听
                //         // immediate:true//立即执行
                //   },
                // sex(nv,ov){
                //     console.log(nv,ov);
                //      this.x=nv=='nan'?"男":"女"
                // },
           x:{
                           handler(nv,ov){
                                 console.log(document.querySelector('.aac').innerHTMl) 
                           },
                          flush:'post'//滞后执行 1
                    
                        
                }
               
            }
           }).mount('#box')
    </script>
</body>
</html>